<script setup>
import { computed, ref, provide } from 'vue';
import MyTable from '@/components/MyTable/MyTable.vue';

const props = defineProps({
  // 表格数据总条数
  total: { type: Number, default: 0 },
  // 表格当前页码
  pageNum: { type: Number, default: 1 },
})
// 分页参数
const pagination = computed(() => ({
  total: props.total,
  showSizeChanger: false,
  current: props.pageNum,
  onChange: e => { emits('pageChange', e) }
}))

const emits = defineEmits(['edit', 'pageChange', 'reload'])

// 表格列配置
const columns = ref([
  { ellipsis: false, title: '用户账号', dataIndex: 'operName', key: 'operName', },
  { ellipsis: false, title: '时间', dataIndex: 'operTime', key: 'operTime', },
  { ellipsis: false, title: '用户IP', dataIndex: 'operIp', key: 'operIp', },
  { ellipsis: false, title: '操作描述', dataIndex: 'title', key: 'title', },
  { ellipsis: false, title: '状态', key: 'status', },
  { ellipsis: false, title: '日志内容', key: 'operParam', },
])

provide('columns', columns.value)
</script>

<template>
  <MyTable :pagination="pagination" :scroll="{ y: 'calc(100vh - 383px)' }">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'status'">
        {{ record.status ? '异常' : '正常' }}
      </template>
      <template v-if="column.key === 'operParam'">
        <a-popover placement="left">
          <template #content>
            <div class="com-title">请求地址：</div>
            {{ record.operUrl }}
            <div class="com-title">请求参数：</div>
            {{ record.operParam }}
          </template>
          <a-button type="link" size="small">查看内容</a-button>
        </a-popover>
      </template>
    </template>
  </MyTable>
</template>